<agm-map [latitude]="34" [longitude]="-113" [zoom]="8">
    <agm-marker [iconUrl]="icon(point.id)" *ngFor="let point of points | async; trackBy: trackByFn" [latitude]="point.pos.geopoint.latitude" [longitude]="point.pos.geopoint.longitude">
        <agm-info-window>


            <h1>{{ point.name }}</h1>

        </agm-info-window>
    </agm-marker>


    <agm-circle [latitude]="34" [longitude]="-113" [radius]="200000"></agm-circle>

</agm-map>


<div class="tools">

    <h1>Listen to Realtime Updates</h1>

    <a routerLink="/">DEMO 1 - Radius Geoquery</a>

    <button [disabled]="clicked" (click)="start()">Start Realtime Feed</button>
    <p>Actual data from Firestore:</p>
    <div *ngIf="testDoc | async as doc" class="doc">
        <br> GeoHash: {{ doc.pos.geohash }} <br> Lat/Lng: {{ doc.pos.geopoint.latitude | number }}, {{ doc.pos.geopoint.longitude | number }}
    </div>

</div>

<script src="https://buttons.github.io/buttons.js"></script>